<template>
	<view class="box">
		<!-- <view class="wrap" style="margin-top: 15rpx;">
				<u-swiper :list="list"></u-swiper>
		</view> -->
		
		
		
		<view>
			<view class="title" :class="topNavStyle.class" :style="topNavStyle.style">
				<view class="flex_col">
					<view class="box1"></view>
					<view class="flex_grow flex_col flex_center tab">
						<view>京东到家</view>
					</view>
					<view class="box1 align_r">
						
					</view>
				</view>
			</view>
			
			
			<card-swiper></card-swiper>
		</view>
		
		
		
		
		<view  class="wrap">
			<!-- <u-notice-bar mode="horizontal" :list="note_list"></u-notice-bar>
			<u-notice-bar mode="horizontal" :is-circular="false" :list="note_list"></u-notice-bar> -->
			<u-notice-bar mode="vertical" :list="note_list"></u-notice-bar>
		</view>
		<!--列表主体 -->
		<view class="u-flex-col u-col-center" style="margin-top: -15rpx;" >
			<view class="yue_li u-flex u-margin-top-20">
				<view class="yue_li_left u-flex u-row-center u-col-center">
					<view class="u-font-30 u-font-bold u-color-balck6">
						<image :src="img" class="yunimg" style=""></image>
					</view><!--{{item.yuyue_time}}-->
				</view>
				
				<view class="yue_li_right u-flex-col" style="">
					<view class="top_title" style="">
						<text class="u-font-bold u-font-28 u-color-balck3 z_titles" style="display: inline-block;">皇家足疗</text>
						<text class="u-font-bold u-font-28 u-color-balck3 y_person"  style="display: inline-block;float: right;font-size: 28rpx;padding-right:10%;">已预约：3492</text>
					</view>
					
					<text class="u-font-28 u-color-balck6" style="margin-top: 10rpx;margin-bottom: 10rpx;font-size: 28rpx;">219元/次 70分钟</text>
					<text class="u-font-28 u-color-balck6 uni-lastmsg" style="margin-top: 10rpx;margin-bottom: 10rpx;font-size: 28rpx;" >
						理疗部位与服务：手部按摩、背部、足部、肩部、腰部、头部、颈部、采耳、洗浴、温泉、刮痧、拔火罐
					</text>
					<text class="u-font-22 u-color-balck6 u-type-success"></text><!--{{item.starx}}-->
				</view>
				<view class="yue_li_rr">
					<u-button class="yy" type="success" shape="square" size="medium" style="">预约</u-button>
				</view>
				<!-- <view  class="u-margin-top-20">
					<u-empty text="没有可预约内容" icon-size="80" mode="data"></u-empty>
				</view> -->
			</view>
		</view>
		<!--如果没有网络-->
		<u-no-network></u-no-network>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
		import cardSwiper from "@/components/helang-cardSwiper/helang-cardSwiper";
	export default {
		data() {
			return {
				// list: [{
				// 		image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
				// 		//title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				// 	},
				// 	{
				// 		image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
				// 		//title: '身无彩凤双飞翼，心有灵犀一点通'
				// 	},
				// 	{
				// 		image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
				// 		//title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				// 	}
				// ],
				margin: "150rpx",
				index: 0,
				list: [
					"https://cdn.uviewui.com/uview/swiper/1.jpg",
					"https://cdn.uviewui.com/uview/swiper/2.jpg",
					"https://cdn.uviewui.com/uview/swiper/3.jpg",
				],
				note_list: [
					
					'寒雨连江夜入吴',
					'平明送客楚山孤',
					'洛阳亲友如相问',
					'一片冰心在玉壶'
				],
				yulist:[
					//[title:'皇家足疗']
				],
				img:'/static/uview/example/massage.jpg',
				topNavIndex:0,
				topNavArr:['推荐','热门','新作'],
				pageScrollTop:0,	// 页面滚动距离
			}
		},
		// components:{
		// 	cardSwiper
		// },
		onPullDownRefresh() {
			this.list=[];
			this.note_list=[];
			this.yulist=[];
			setTimeout(function () {
			    uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {

			}
		}
	
</script>

<style lang="scss" scoped>
	// .box{
	// 	background-color: #F2F2F2;
	// }
	
	.yunimg{
		width: 150rpx;
		height: 150rpx;
		margin:5rpx 50rpx!important;
		border-radius: 15rpx;
	}
	.top_title{
		margin-top: 10rpx;
	}
	.z_titles{
		font-weight:700;
	}
	.y_person{
		font-size: 28rpx;
	}
	.wrap {
		padding: 0 15rpx 15rpx 15rpx;
	}
	page{
		background-color: #F6F6F6;
	}
	.topcent{
		width: 750rpx;
		background-color: #FFFFFF;
	}
	.yue_li{
		width: 97%;//720rpx
		border-radius: 10rpx;
		background-color: #FFFFFF;
		padding: 5rpx;
		//margin: 30rpx 0;
		height: 220rpx;
	}
	.left_xian{
		width: 10rpx;
		height: 170rpx;
		border-top-left-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
		background-color: #18B566;
	}
	.yue_li_left{
		width: 80rpx;
		margin-left: 45rpx;
		border-radius: 15rpx;
	}
	.yue_li_right{
		width: 90%;
		margin-left:50rpx;
		//padding:0 1rpx;
	}
	.yue_li_rr{
		width: 120rpx;
		position: relative;
		top:-30rpx;
	}
	.yy{
		width: 110rpx;
		background-color:#19BE6B;
		height: 60rpx;
		color: #FFFFFF;
		//padding: 0 15rpx;
		border-radius: 10rpx;
		float: right;
		margin: 0 30rpx;
		padding: 0 20rpx!important;
		// background-color:#19BE6B;
		// color: #FFFFFF;
		// padding: 0 15rpx;
		// border-radius: 10rpx;
		
		// width: auto;margin-right: 25rpx;float: right;margin-left: 30rpx;height:50rpx;
	}
	 .uni-lastmsg {
	     width: 100%;
	     color: #8b8b8b;
	     display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
	     overflow: hidden;
	     word-break: break-all; 
	     text-overflow: ellipsis;  /* 超出部分省略号 */
	     -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
	     -webkit-line-clamp: 1; /** 显示的行数 **/
	    
	}
	
	.top-swiper{
		margin-bottom: 30rpx; 
		
		.bg{
			padding-top: var(--status-bar-height);
			box-sizing: content-box;
			width: 100%;
			position: relative;
			
			.placeholder{
				box-sizing: content-box;
				padding-top: 600rpx;
				height: 44px;
			}
			
			.image{
				box-sizing: content-box;
				position: absolute;
				z-index: 1;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				overflow: hidden;
				
				&::after{
					content: '';
					position: absolute;
					width: 100%;
					height: 100%;
					z-index: 1;
					bottom: 0;
					left: 0;
					height: 65%;
					background-image: linear-gradient(to bottom ,transparent, #FFF);
				}
				
				> image{
					position: absolute;
					box-sizing: content-box;
					padding: 60px;
					top: 0;
					left: 0;
					width: 100%;
					height: 80%;
					top: -60px;
					left: -60px;
					filter: blur(50px);
				}
			}
		}
		
		.box{
			padding-top: var(--status-bar-height);
			box-sizing: content-box;
			position: absolute;
			z-index: 5;
			top: 0;
			left: 0;
			width: 100%;
			height: auto;
		}
		
		.swiper {
			height: 100rpx;
			margin: 0 20rpx;
		
			.le-img {
				width: 100%;
				height: 100%;
				display: block;
				transform: scale(0.9);
				transition: transform 0.3s ease-in-out 0s;
				border-radius: 4px;
		
				&.le-active {
					transform: scale(1);
				}
			}
		
		}
	}
	
</style>